

import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Alert, Linking } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome5, FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import styles from './styles';

const AboutUsScreen = () => {
  const router = useRouter();

  const handleBackPress = () => {
    if (router.canGoBack()) {
      router.back();
    }
  };

  const handleWebsitePress = async () => {
    const url = 'https://www.flowbatch.com';
    try {
      const supported = await Linking.canOpenURL(url);
      if (supported) {
        await Linking.openURL(url);
      } else {
        Alert.alert('错误', '无法打开网站链接');
      }
    } catch (error) {
      Alert.alert('错误', '打开网站时发生错误');
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* 顶部导航栏 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={handleBackPress}
          activeOpacity={0.7}
        >
          <FontAwesome6 name="arrow-left" size={18} color="#D1D5DB" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>关于我们</Text>
        <View style={styles.headerPlaceholder} />
      </View>

      {/* 主要内容区域 */}
      <ScrollView 
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* 应用Logo和名称 */}
        <View style={styles.appInfoSection}>
          <View style={styles.logoContainer}>
            <LinearGradient
              colors={['#6366f1', '#8b5cf6']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.logoGradient}
            >
              <FontAwesome6 name="layer-group" size={48} color="#FFFFFF" />
            </LinearGradient>
          </View>
          <View style={styles.appNameSection}>
            <LinearGradient
              colors={['#6366f1', '#8b5cf6']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.gradientTextWrapper}
            >
              <Text style={styles.appName}>流批通</Text>
            </LinearGradient>
            <Text style={styles.appEnglishName}>FlowBatch</Text>
            <Text style={styles.appSlogan}>高效便捷的移动审批解决方案</Text>
          </View>
        </View>

        {/* 版本信息 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>版本信息</Text>
          <View style={styles.infoCard}>
            <View style={styles.versionRow}>
              <Text style={styles.versionLabel}>当前版本</Text>
              <LinearGradient
                colors={['#6366f1', '#8b5cf6']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={styles.versionBadge}
              >
                <Text style={styles.versionNumber}>v1.2.3</Text>
              </LinearGradient>
            </View>
            <View style={styles.versionDivider} />
            <View style={styles.versionDetails}>
              <View style={styles.versionDetailRow}>
                <Text style={styles.versionDetailLabel}>构建版本</Text>
                <Text style={styles.versionDetailValue}>2024011501</Text>
              </View>
              <View style={styles.versionDetailRow}>
                <Text style={styles.versionDetailLabel}>发布日期</Text>
                <Text style={styles.versionDetailValue}>2024年1月15日</Text>
              </View>
            </View>
          </View>
        </View>

        {/* 产品介绍 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>产品介绍</Text>
          <View style={styles.infoCard}>
            <Text style={styles.introContent}>
              流批通是一款基于Flowable工作流引擎的移动审批应用，专为企业管理人员打造。提供高效、便捷、移动化的审批处理能力，支持待办审批、已审批、我发起的、抄送我的等多种审批类型，让您随时随地处理工作审批，提升企业办公效率。
            </Text>
          </View>
        </View>

        {/* 开发团队 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>开发团队</Text>
          <View style={styles.infoCard}>
            <View style={styles.teamInfoRow}>
              <FontAwesome6 name="code" size={16} color="#6366f1" style={styles.teamIcon} />
              <Text style={styles.teamInfoText}>开发公司：流批科技有限公司</Text>
            </View>
            <View style={styles.teamInfoRow}>
              <FontAwesome6 name="envelope" size={16} color="#6366f1" style={styles.teamIcon} />
              <Text style={styles.teamInfoText}>技术支持：support@flowbatch.com</Text>
            </View>
            <View style={styles.teamInfoRow}>
              <FontAwesome6 name="phone" size={16} color="#6366f1" style={styles.teamIcon} />
              <Text style={styles.teamInfoText}>客服热线：400-888-9999</Text>
            </View>
          </View>
        </View>

        {/* 官方网站 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>官方网站</Text>
          <TouchableOpacity 
            style={styles.infoCard} 
            onPress={handleWebsitePress}
            activeOpacity={0.8}
          >
            <View style={styles.websiteRow}>
              <View style={styles.websiteInfo}>
                <FontAwesome6 name="globe" size={16} color="#6366f1" />
                <Text style={styles.websiteUrl}>www.flowbatch.com</Text>
              </View>
              <FontAwesome5 name="external-link-alt" size={14} color="#6B7280" />
            </View>
          </TouchableOpacity>
        </View>

        {/* 版权声明 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>版权声明</Text>
          <View style={styles.infoCard}>
            <Text style={styles.copyrightText}>© 2024 流批科技有限公司</Text>
            <Text style={styles.copyrightText}>保留所有权利。未经许可，不得复制、分发或修改本软件的任何部分。</Text>
            <Text style={styles.copyrightText}>本软件受著作权法和国际条约保护。</Text>
          </View>
        </View>

        {/* 底部信息 */}
        <View style={styles.footerSection}>
          <Text style={styles.footerText}>感谢您使用流批通</Text>
          <Text style={styles.footerSubText}>让审批更高效，让工作更轻松</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default AboutUsScreen;

